<div class="form-group row" [formGroup]="parentFormGroup">
  <label class="col-sm-3 col-check-label">
    {{data.label}}: <span class="required" *ngIf="data?.required">*</span>
  </label>
  <div class="col-sm-9">
    <ng-container [ngSwitch]="true">
      <ng-container *ngSwitchCase="mode == MODES.View">
        <div class="custom-control custom-radio" *ngFor="let option of data.options">
          <input type="radio" [formControlName]="data.name" name="{{data.name}}" id="{{option.name}}"
                 value="{{option.name}}" class="custom-control-input"/><label class="custom-control-label"
                                                                              for="{{option.name}}"> {{option.label}}</label>
        </div>
      </ng-container>
      <ng-container *ngSwitchCase="mode == MODES.Create || mode == MODES.Edit || mode == MODES.Bulk">
        <div class="container">
          <div class="row">
            <div class="col-sm-auto p-0" *ngIf="mode == MODES.Bulk">
              <cmdb-object-bulk-input-appends [data]="data"
                                              [mode]="mode"
                                              [parentFormGroup]="parentFormGroup" ></cmdb-object-bulk-input-appends>
            </div>
            <div class="col-sm-4">
              <div class="custom-control custom-radio" *ngFor="let option of data.options">
                <input type="radio" [formControlName]="data.name" name="{{data.name}}" [attr.id]="option.name"
                       value="{{option.name}}" class="custom-control-input" [ngClass]="{ 'is-valid': controller.valid && (controller.dirty || controller.touched),
                 'is-invalid': controller.invalid && (controller.dirty || controller.touched)}"/><label
                class="custom-control-label" for="{{option.name}}"> {{option.label}}</label>
              </div>
            </div>
            <div class="col-sm">
              <cmdb-input-appends [data]="data" [mode]="mode" [parentFormGroup]="parentFormGroup"></cmdb-input-appends>
            </div>
          </div>
        </div>
      </ng-container>
      <div *ngSwitchDefault>
        <cmdb-mode-error></cmdb-mode-error>
      </div>
    </ng-container>
    <div *ngIf="controller.invalid && (controller.dirty || controller.touched)" class="invalid-feedback">
      <div class="float-right" *ngIf="controller.errors.required">
        {{data.label}} is a required field.
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
</div>
